import React, {PureComponent} from "react";
import "./login.css";
import {connect} from "react-redux";
import {actionCreator} from "./store";
import * as CommonUtils from "../common/CommonUtils";
import {Button, Checkbox, message} from "antd";
import md5 from "js-md5";

import Cookie from "js-cookie";
import {loginIn} from "../common/ApiUtils";

import history from "../common/route/history";

/**
 * 账号登录界面
 */
class LoginComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.startLogin = this.startLogin.bind(this);
    }

    render() {

        return (
            <div className={"loginWrapper"}>
                <div className={"loginCenterWrapper"}>
                    <div className={"loginLeftWrapper"}/>

                    <div className={"loginRightWrapper"}>

                        <p className={'loginAccountTitle'}>
                            浙江中智海车安心智能管理系统
                        </p>
                        <div className={"loginInputCommonWrapper loginInputAccountStyle"}>
                            <input
                                className={"loginCommonStyle loginAccount"}
                                placeholder={"请输入账号"}
                                onChange={this.props.changeAccountText}
                                required={true}
                                defaultValue={this.props.accountText}
                            />

                        </div>

                        <div className={"loginInputCommonWrapper loginInputPwdStyle"}>
                            <input
                                className={"loginCommonStyle loginPwd"}
                                placeholder={"请输入密码"}
                                type={"password"}
                                required={true}
                                onChange={this.props.changePwdText}
                                defaultValue={this.props.pwdText}

                            />
                        </div>

                        <Checkbox
                            type={"checkbox"}
                            style={loginStateStyle}
                            onChange={this.props.changeCheckState}
                            checked={this.props.checkState}
                        >
                            记住密码
                        </Checkbox>


                        <Button
                            type={"primary"}
                            style={loginSubmitStyle}
                            onClick={this.startLogin}
                        >登录</Button>

                    </div>

                </div>

                <div className={"loginCopyRightWrapper"}>
                    COPYRIGHT©&nbsp;2016&nbsp;ZHONGZHIHAI&nbsp;ALLRIGHT&nbsp;RESERVED&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;浙ICP备18031656号-1
                </div>

            </div>
        );
    }


    startLogin() {

        const account = this.props.accountText;
        const pwd = this.props.pwdText;

        if (CommonUtils.judgeStringIsEmpty(this.props.accountText)) {

            message.error("账号不能为空", 1);
            return ;
        }
        if (CommonUtils.judgeStringIsEmpty(this.props.pwdText)) {

            message.error("密码不能为空", 1);
            return ;
        }


        const md5Pwd = md5(pwd);

        const data = {
            "userAccount": account,
            "userPwd": md5Pwd,
            "sysCode": "sys0001",
            "userCid": ""
        };

        console.log("登录请求开始");
        loginIn(data)
            .then((res) => {
                console.log("登录回调数据");
                console.log(res);

                if (res.resultStatus) {

                    if (this.props.checkState) {

                        const userStr = JSON.stringify({
                            account: account,
                            pwd: pwd,
                        });
                        Cookie.set("CheAnXinAccount", userStr);
                    }

                    const token = res.data.accountToken;
                    console.log(`token =>${token}`);
                    this.props.changeToken(token);

                    message.success(`登录成功`, 1);
                    history.push("/home/global_monitor");


                    console.log("执行判断登录 =>在fetch线程结束");
                } else {
                    message.error(`${res.msg}`, 1);

                }

            });



    }

    componentDidMount() {
        const item = Cookie.get("CheAnXinAccount");

        if (item) {
            const userInfo = JSON.parse(item);
            this.props.changeUserInfo(userInfo);
        }
    }


}

// accountText: "",
//     pwdText: "",
//     checkState: false
const mapState = (status) => {

    return {
        accountText: status.getIn(["accountReducer", "accountText"]),
        pwdText: status.getIn(["accountReducer", "pwdText"]),
        checkState: status.getIn(["accountReducer", "checkState"]),
    }

};

const dispatchState = (dispatch) => {
    return {
        changeAccountText(e) {
            const text = e.target.value;
            const action = actionCreator.changeAccountText(text);
            dispatch(action);
        }, changePwdText(e) {
            const text = e.target.value;
            const action = actionCreator.changePwdText(text);
            dispatch(action);
        }, changeCheckState() {
            const action = actionCreator.changeCheckStatus();
            dispatch(action);
        }, changeUserInfo(data) {
            const action = actionCreator.changeUserInfo(data.account, data.pwd);
            dispatch(action);
        }, changeToken(token) {
            const action = actionCreator.changeApiToken(token);
            dispatch(action);
        }
    }
};


export default connect(mapState, dispatchState)(LoginComponent);


const loginStateStyle = {
    marginTop: 10,
    color: "#fff"
};

const loginSubmitStyle = {
    width: "100%",
    height: 40,
    lineHeight: "40px",
    textAlign: "center",
    color: "#ffffff",
    border: "none",

    backgroundColor: "#566bba",
    marginTop: 10,
    borderRadius: 4,
};